<template>
  <div>
    <!--     <el-button
      type="text"
      size="medium"
      icon="el-icon-document-checked"
      @click="$emit('handleFormDesignSave', elementList)"
      >保存</el-button
    >
    <el-button
      class="close"
      type="text"
      size="medium"
      icon="el-icon-close"
      @click="$emit('handleDialogClose')"
      >关闭</el-button
    > -->
    <div
      class="button"
      style="display: flex;justify-content: flex-end;padding-right: 50px;"
    >
      <el-button
        class="close"
        type="text"
        size="medium"
        icon="el-icon-delete"
        @click="clear"
        >清空</el-button
      >
      <el-button
        class="close"
        type="text"
        size="medium"
        icon="el-icon-view"
        @click="$emit('handleFormDesignView', elementList)"
        >预览</el-button
      >
    </div>

    <div class="widget-form-list" id="targetDrop">
      <!-- input -->
      <div v-for="(item, index) in elementList" :key="index">
        <div
          class="el-form-item widget-view  el-form-item--small"
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'input' && item.props.type == 'text'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span
              ><div class="el-input el-input--small" style="width: 100%;">
                <input
                  type="text"
                  autocomplete="off"
                  placeholder=""
                  class="el-input__inner"
                />
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- numnber -->
        <div
          class="el-form-item widget-view  el-form-item--small"
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'InputNumber1'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span
              ><div class="el-input el-input--small" style="width: 100%;">
                <input
                  type="number"
                  autocomplete="off"
                  placeholder=""
                  class="el-input__inner"
                />
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>

        <!-- textarea -->
        <div
          class="el-form-item widget-view  el-form-item--small"
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'input' && item.props.type == 'textarea'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div class="el-textarea el-input--small" style="width: 100%;">
                <textarea
                  autocomplete="off"
                  rows="5"
                  placeholder=""
                  class="el-textarea__inner"
                  style="min-height: 31px;"
                ></textarea>
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- checkbox -->
        <div
          class="el-form-item widget-view  el-form-item--small "
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'checkbox'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div
                role="group"
                aria-label="checkbox-group"
                class="el-checkbox-group"
              >
                <label class="el-checkbox" style="display: block;"
                  ><span class="el-checkbox__input"
                    ><span class="el-checkbox__inner"></span
                    ><input
                      type="checkbox"
                      aria-hidden="false"
                      class="el-checkbox__original"
                      value="Option 1"/></span
                  ><span class="el-checkbox__label">
                    Option 1
                  </span></label
                ><label class="el-checkbox" style="display: block;"
                  ><span class="el-checkbox__input"
                    ><span class="el-checkbox__inner"></span
                    ><input
                      type="checkbox"
                      aria-hidden="false"
                      class="el-checkbox__original"
                      value="Option 2"/></span
                  ><span class="el-checkbox__label">
                    Option 2
                  </span></label
                ><label class="el-checkbox" style="display: block;"
                  ><span class="el-checkbox__input"
                    ><span class="el-checkbox__inner"></span
                    ><input
                      type="checkbox"
                      aria-hidden="false"
                      class="el-checkbox__original"
                      value="Option 3"/></span
                  ><span class="el-checkbox__label">
                    Option 3
                  </span></label
                >
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- radio -->
        <div
          class="el-form-item widget-view  el-form-item--small "
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'radio'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div role="radiogroup" class="el-radio-group">
                <label
                  role="radio"
                  tabindex="0"
                  class="el-radio"
                  style="display: block;"
                  ><span class="el-radio__input"
                    ><span class="el-radio__inner"></span
                    ><input
                      type="radio"
                      aria-hidden="true"
                      tabindex="-1"
                      class="el-radio__original"
                      value="Option 1"/></span
                  ><span class="el-radio__label">
                    Option 1
                  </span></label
                ><label
                  role="radio"
                  tabindex="-1"
                  class="el-radio"
                  style="display: block;"
                  ><span class="el-radio__input"
                    ><span class="el-radio__inner"></span
                    ><input
                      type="radio"
                      aria-hidden="true"
                      tabindex="-1"
                      class="el-radio__original"
                      value="Option 2"/></span
                  ><span class="el-radio__label">
                    Option 2
                  </span></label
                ><label
                  role="radio"
                  tabindex="-1"
                  class="el-radio"
                  style="display: block;"
                  ><span class="el-radio__input"
                    ><span class="el-radio__inner"></span
                    ><input
                      type="radio"
                      aria-hidden="true"
                      tabindex="-1"
                      class="el-radio__original"
                      value="Option 3"/></span
                  ><span class="el-radio__label">
                    Option 3
                  </span></label
                >
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- InputNumber -->
        <div
          class="el-form-item widget-view  el-form-item--small"
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'InputNumber'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div class="el-input-number el-input-number--small">
                <span role="button" class="el-input-number__decrease"
                  ><i class="el-icon-minus"></i></span
                ><span role="button" class="el-input-number__increase"
                  ><i class="el-icon-plus"></i
                ></span>
                <div class="el-input el-input--small">
                  <input
                    type="text"
                    autocomplete="off"
                    max="Infinity"
                    min="-Infinity"
                    class="el-input__inner"
                    role="spinbutton"
                    aria-valuemax="Infinity"
                    aria-valuemin="-Infinity"
                    aria-valuenow="0"
                    aria-disabled="false"
                  />
                </div>
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- select -->
        <div
          class="el-form-item widget-view  el-form-item--small"
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'select'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div class="el-select el-select--small">
                <div class="el-input el-input--small el-input--suffix">
                  <input
                    type="text"
                    readonly="readonly"
                    autocomplete="off"
                    placeholder=""
                    class="el-input__inner"
                  /><span class="el-input__suffix"
                    ><span class="el-input__suffix-inner"
                      ><i
                        class="el-select__caret el-input__icon el-icon-arrow-up"
                      ></i></span
                  ></span>
                </div>
                <div
                  class="el-select-dropdown el-popper"
                  style="display: none; min-width: 188px;"
                >
                  <div class="el-scrollbar" style="">
                    <div
                      class="el-select-dropdown__wrap el-scrollbar__wrap"
                      style="margin-bottom: -15px; margin-right: -15px;"
                    >
                      <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item">
                          <span>Option 1</span>
                        </li>
                        <li class="el-select-dropdown__item">
                          <span>Option 2</span>
                        </li>
                        <li class="el-select-dropdown__item">
                          <span>Option 3</span>
                        </li>
                      </ul>
                    </div>
                    <div class="el-scrollbar__bar is-horizontal">
                      <div
                        class="el-scrollbar__thumb"
                        style="transform: translateX(0%);"
                      ></div>
                    </div>
                    <div class="el-scrollbar__bar is-vertical">
                      <div
                        class="el-scrollbar__thumb"
                        style="transform: translateY(0%);"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>

        <!-- TimePicker -->
        <div
          class="el-form-item widget-view  el-form-item--small"
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'TimePicker'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div
                class="el-date-editor el-input el-input--small el-input--prefix el-input--suffix el-date-editor--time"
              >
                <input
                  type="text"
                  autocomplete="off"
                  name=""
                  placeholder=""
                  class="el-input__inner"
                /><span class="el-input__prefix"
                  ><i class="el-input__icon el-icon-time"></i></span
                ><span class="el-input__suffix"
                  ><span class="el-input__suffix-inner"
                    ><i class="el-input__icon"></i></span
                ></span>
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- DatePicker -->
        <div
          class="el-form-item widget-view  el-form-item--small"
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'DatePicker'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div
                class="el-date-editor el-input el-input--small el-input--prefix el-input--suffix el-date-editor--date"
              >
                <input
                  type="text"
                  autocomplete="off"
                  name=""
                  placeholder=""
                  class="el-input__inner"
                /><span class="el-input__prefix"
                  ><i class="el-input__icon el-icon-date"></i></span
                ><span class="el-input__suffix"
                  ><span class="el-input__suffix-inner"
                    ><i class="el-input__icon"></i></span
                ></span>
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- file -->
        <div
          class="el-form-item widget-view  el-form-item--small"
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'file'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div>
                <div tabindex="0" class="el-upload el-upload--text">
                  <button
                    type="button"
                    class="el-button el-button--primary el-button--small"
                  >
                    <span>点击上传</span></button
                  ><input type="file" name="file" class="el-upload__input" />
                </div>
                <ul class="el-upload-list el-upload-list--text"></ul></div
            ></span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- upload -->
        <div
          class="el-form-item widget-view  el-form-item--small "
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'upload'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div id="upload_1590399457993" class="fm-uplaod-container">
                <div class="drag-img-list"></div>
                <div
                  class="el-upload el-upload--picture-card"
                  style="width: 100px; height: 100px;"
                >
                  <i
                    class="el-icon-plus"
                    style="font-size: 25px; margin-top: -12.5px; margin-left: -12.5px;"
                  ></i
                  ><input
                    accept="image/*"
                    type="file"
                    name="file"
                    class=" upload-input"
                    style="width: 0px; height: 0px;"
                  />
                </div>
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>{{ item.field }}</span>
            </div>
          </div>
        </div>
        <!-- rate -->
        <div
          class="el-form-item widget-view  el-form-item--small "
          @click="changeActive(item, index)"
          :draggable="item.drops"
          :class="item.active ? 'active' : ''"
          v-if="item.type == 'rate'"
        >
          <label class="el-form-item__label" style="width: 100px;"
            >{{ item.title }}:
          </label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div
                role="slider"
                aria-valuetext=""
                aria-valuemin="0"
                aria-valuemax="5"
                tabindex="0"
                class="el-rate"
                aria-valuenow="0"
              >
                <span class="el-rate__item" style="cursor: pointer;"
                  ><i
                    class="el-rate__icon el-icon-star-off"
                    style="color: rgb(198, 209, 222);"
                  ></i></span
                ><span class="el-rate__item" style="cursor: pointer;"
                  ><i
                    class="el-rate__icon el-icon-star-off"
                    style="color: rgb(198, 209, 222);"
                  ></i></span
                ><span class="el-rate__item" style="cursor: pointer;"
                  ><i
                    class="el-rate__icon el-icon-star-off"
                    style="color: rgb(198, 209, 222);"
                  ></i></span
                ><span class="el-rate__item" style="cursor: pointer;"
                  ><i
                    class="el-rate__icon el-icon-star-off"
                    style="color: rgb(198, 209, 222);"
                  ></i></span
                ><span class="el-rate__item" style="cursor: pointer;"
                  ><i
                    class="el-rate__icon el-icon-star-off"
                    style="color: rgb(198, 209, 222);"
                  ></i
                ></span>
              </div>
            </span>
            <div class="widget-view-action" v-show="item.active">
              <i class="el-icon-top" @click.stop="up(index, elementList)"></i>
              <i
                class="el-icon-bottom"
                @click.stop="down(index, elementList)"
              ></i>
              <i
                class="iconfont icon-trash"
                @click.stop="deleteItem(index)"
              ></i>
            </div>
            <div class="widget-view-drag" v-show="item.active">
              <i
                class="iconfont icon-drag drag-widget"
                @mouseenter="enter(item, index)"
                @mouseleave="leave(item, index)"
              ></i>
            </div>
            <div class="widget-view-model">
              <span>
                <span>{{ item.field }}</span></span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    fieldData: {
      type: Object,
      required: true,
      default: () => []
    },
    fromSeting: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      elementList: [],
      clickEvent: {},
      dragElement: null, // 用于存放拖动元素
      dragEnterElement: null, // 用于存放进入拖动元素
      dragIndex: null, // 用于存放拖动元素下表
      targetIndex: null, // 用于存放进入元素下标
      source: null
    }
  },
  watch: {
    fieldData(value) {
      // 左侧传值=》新增
      console.log(value)
      if (value.active === undefined && value.type) {
        this.elementList.forEach((el, dx) => {
          this.$set(this.elementList[dx], 'active', false)
        })
        value.active = true
        this.elementList.push(this.fieldData)
        let index = this.elementList.findIndex(el => el.id === value.id)
        console.log(index)

        this.$nextTick(() => {
          this.clickEvent = {
            item: value,
            index: index
          }
          this.$emit('clickEvent', this.clickEvent)
          this.dropItem()
        })
      } else {
        // 右侧传值=》更新
        let index = this.elementList.findIndex(el => el.id === value.id)
        this.$set(this.elementList, index, value)
      }
    },
    fromSeting: {
      handler(newValue, oldValue) {
        this.elementList = newValue
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {
    this.$nextTick(res => {
      // 左侧字段拖动
      let target = document.getElementById('targetDrop')
      target.ondragenter = this.handle_enter
      target.ondragover = this.handle_over
      target.ondragleave = this.handle_leave
      target.ondrop = this.handle_drop
      // 拖动设置排序
      this.dropItem()
    })
  },
  methods: {
    enter(item, index) {
      this.elementList.forEach((el, dx) => {
        this.$set(this.elementList[dx], 'drops', false)
      })
      this.$set(this.elementList[index], 'drops', true)
    },
    leave(item, index) {
      this.elementList.forEach((el, dx) => {
        this.$set(this.elementList[dx], 'drops', false)
      })
    },
    // 点击中间控件
    changeActive(item, index) {
      this.elementList.forEach((el, dx) => {
        this.$set(this.elementList[dx], 'active', false)
      })
      this.$set(this.elementList[index], 'active', true)
      // 传值给最右侧
      this.clickEvent = {
        item: item,
        index: index
      }
      this.$emit('clickEvent', this.clickEvent)
    },
    // 删除表单项
    deleteItem(index) {
      this.elementList.splice(index, 1)
      this.$emit('clickEvent', {})
    },
    // 情况表单设计
    clear() {
      this.elementList = []
      this.$emit('clickEvent', {})
    },
    up(index, table) {
      if (index === 0) {
        this.$message({
          type: 'warning',
          message: '已经是第一条了',
          duration: 2000
        })
      } else {
        let item = JSON.parse(JSON.stringify(table[index]))
        let upitem = JSON.parse(JSON.stringify(table[index - 1]))
        this.$set(this.elementList, index, upitem)
        this.$set(this.elementList, index - 1, item)
      }
    },
    down(index, table) {
      if (index === this.elementList.length - 1) {
        this.$message({
          type: 'warning',
          message: '已经是最后一条了',
          duration: 2000
        })
      } else {
        let item = JSON.parse(JSON.stringify(table[index]))
        let downitem = JSON.parse(JSON.stringify(table[index + 1]))
        this.$set(this.elementList, index, downitem)
        this.$set(this.elementList, index + 1, item)
      }
    },
    changeIndex(dragIndex, targetIndex) {
      ;[this.elementList[dragIndex], this.elementList[targetIndex]] = [
        this.elementList[targetIndex],
        this.elementList[dragIndex]
      ]
    },
    handle_enter(e) {
      e.preventDefault()
      this.setStyle(e)
      // console.log('handle_enter-进入目的地')
    },
    handle_over(e) {
      e.preventDefault()
      this.setStyle(e)
      // console.log(returnObj + '-handle_over-在目的地范围内')
    },
    handle_leave(e) {
      e.preventDefault()
      this.rsetStyle(e)
      // console.log('handle_leave-没有放下就离开目的地')
    },
    handle_drop(e) {
      e.stopPropagation() // 不再派发事件。解决Firefox浏览器，打开新窗口的问题。
      e.preventDefault()

      if (this.dragEnterElement) {
        this.dragEnterElement.style.borderTop = 'none' // 设置拖动进入元素的border
        this.changeIndex(this.dragIndex, this.targetIndex) // 元素互换位置
      }
      this.dragElement = null

      this.rsetStyle(e)
      let returnObj = e.dataTransfer.getData('data')
      if (returnObj) {
        console.log(returnObj)
        this.fieldData = JSON.parse(JSON.stringify(JSON.parse(returnObj)))
      }
      console.log(returnObj + '-handle_drop-在目的地区释放')
    },
    setStyle(e) {
      let target = document.getElementById('targetDrop')
      target.style.boxShadow = '15px 15px 15px #ccc'
      target.style.transition = 'all .5s'
    },
    rsetStyle(e) {
      let target = document.getElementById('targetDrop')
      target.style.boxShadow = 'none'
    },
    // 拖动设置排序
    dropItem() {
      this.source = document.querySelectorAll('.widget-view')
      let that = this
      for (let i = 0; i < this.source.length; i++) {
        this.source[i].addEventListener(
          'dragstart',
          function(ev) {
            that.dragIndex = i
            that.dragElement = this // 用于存放拖动元素
            this.style.backgroundColor = '#f8f8f8' // 设置拖动元素的背景
          },
          false
        )

        this.source[i].addEventListener(
          'dragend',
          function(ev) {
            this.style.borderTop = 'none' // 设置拖动元素的背景
            ev.target.style.backgroundColor = 'rgba(236, 245, 255, 0.3)' // 拖放结束还原拖动元素的背景
            ev.preventDefault()
          },
          false
        )

        this.source[i].addEventListener(
          'dragenter',
          function(ev) {
            if (!that.dragElement) {
              return
            }
            if (that.dragEnterElement) {
              that.dragEnterElement.style.borderTop = 'none' // 设置拖动进入元素的border
            }
            that.dragEnterElement = this
            that.targetIndex = i
            if (that.dragElement !== this) {
              this.style.borderTop = '5px solid red' // 设置拖动进入元素的border
            }
          },
          false
        )

        this.source[i].addEventListener(
          'ondragleave',
          function(ev) {
            that.dragEnterElement.style.borderTop = 'none' // 设置拖动进入元素的border
            this.style.borderTop = 'null' // 设置拖动进入元素的border
          },
          false
        )
      }
    }
  }
}
</script>

<style scoped>
#targetDrop {
  user-select: none;
  min-height: 800px;
  background: #fff;
  border: 1px dashed #999;
  overflow-y: auto;
}
.widget-form-list {
  background: #fff;
  border: 1px dashed #999;
  min-height: 100%;
  margin: 10px;
}

.widget-form-list .widget-view-model {
  position: absolute;
  top: -8px;
  right: 3px;
  font-size: 12px;
  color: #67c23a;
  z-index: 9;
}

.widget-form-list .widget-col-list {
  min-height: 50px;
  border: 1px dashed #ccc;
  background: #fff;
}

.widget-form-list .widget-view {
  padding-bottom: 18px;
  position: relative;
  border: 1px dashed hsla(0, 0%, 66.7%, 0.5);
  background-color: rgba(236, 245, 255, 0.3);
  margin: 2px;
  overflow: hidden;
}

.widget-form-list .widget-view .el-form-item__content {
  position: static;
}

.widget-form-list .widget-view.is_req .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

.widget-form-list .widget-view.is_hidden {
  background: #fef0f0;
}

.widget-form-list .widget-view .widget-view-description {
  height: 15px;
  line-height: 15px;
  font-size: 13px;
  margin-top: 6px;
  color: #909399;
}

.widget-form-list .widget-view .widget-view-action {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 28px;
  line-height: 28px;
  background: #409eff;
  z-index: 9;
}

.widget-form-list .widget-view .widget-view-action i {
  font-size: 14px;
  color: #fff;
  margin: 0 5px;
  cursor: pointer;
}

.widget-form-list .widget-view .widget-view-drag {
  position: absolute;
  left: -2px;
  top: -2px;
  bottom: -18px;
  height: 28px;
  line-height: 28px;
  background: #409eff;
  z-index: 9;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
}

.widget-form-list .widget-view .widget-view-drag i {
  font-size: 14px;
  color: #fff;
  margin: 0 5px;
  cursor: move;
}

.widget-form-list .widget-view:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  z-index: 8;
  content: '';
}

.widget-form-list .widget-view:hover {
  background: #ecf5ff;
  outline: 1px solid #409eff;
  outline-offset: 0;
}

.widget-form-list .widget-view:hover.active {
  outline: 2px solid #409eff;
  border: 1px solid #409eff;
  outline-offset: 0;
}

.widget-form-list .widget-view:hover .widget-view-drag {
  display: block;
}
.widget-form-list .widget-view .widget-view-drag:hover {
  cursor: pointer !important;
}
.widget-form-list .widget-view .widget-view-drag i {
  margin: 0 5px;
}

.widget-form-list .widget-view.active {
  outline: 2px solid #409eff;
  border: 1px solid #409eff;
}

.widget-form-list .widget-view.ghost {
  background: #f56c6c;
  border: 2px solid #f56c6c;
  outline-width: 0;
  height: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0;
  content: '';
  overflow: hidden;
  padding: 0;
  margin: 2px;
}

.widget-form-list .widget-table {
  padding-bottom: 0;
  padding: 5px;
  background-color: rgba(253, 246, 236, 0.3);
}

.widget-form-list .widget-table .widget-table-wrapper {
  min-height: 50px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.widget-form-list .widget-table .widget-table-wrapper .widget-table-row td {
  border-bottom: 0;
}

.widget-form-list .widget-table .widget-table-wrapper .widget-table-left {
  width: 51px;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  overflow: hidden;
}

.widget-form-list
  .widget-table
  .widget-table-wrapper
  .widget-table-left
  .el-table__body-wrapper {
  overflow: hidden;
}

.widget-form-list
  .widget-table
  .widget-table-wrapper
  .widget-table-left
  .el-table__fixed {
  min-height: 88px !important;
}

.widget-form-list .widget-table .widget-table-wrapper .widget-table-view {
  border: 1px solid #ebeef5;
  width: 200px;
  float: left;
  height: 100%;
  position: relative;
  display: block;
}
</style>
